<template>
  <div>
      <div  class="item">
          <div class="header">
              <img class="header_img" :src="data.avatar" alt="">
              {{data.date}}
          </div>
          <p class="item_title">{{data.title}}</p>
          <img :src="data.imgSrc" alt="" class="item_pic">
          <p class="item_content">{{data.content}}</p>
      </div>

  </div>
</template>

<script>
export default {
    props:{
      data:{
       type:Object 
      },
    }
}
</script>

<style scoped>
.item{
    background-color: #fff;
    margin: 40px auto;
    padding: 10px auto;
    border-bottom: 1px solid #f5f5f4;
}
.header_img{
    width: 80px;
    height: 80px;
    vertical-align: middle;
    margin: 5px 20px;
}
.item_title{
    font-weight: bold;
    margin: 20px 20px;
}
.item_pic{
    width: 100%;
    max-height:400px ;
}
.item_content{
    margin: 20px;
}
</style>